<template>
  <view class="custom-nav-content"
    :style="{height: navBottom + 'px', background: customNavContentBgColor ?    customNavContentBgColor : (scrollTop > 30 ? '#fff' : 'transparent'),width: '100%' }">
    <view class="custom-nav"
      :style="{ height: navHeight + 'px', top: navTop + 'px', lineHeight: navHeight + 'px',width: '100%' }">
      <view class="back-button" @click="goBack" v-if="showGoBack">
        <view class="left-icon iconfont xlmicon-zuojiantou-"
          :style="{ color: leftIconColor  ? leftIconColor : '#333' }"></view>
      </view>
      <view class="title" :style="{ width: showGoBack  ? 'calc(100% - 70rpx)' : '100%' }">
        <view class="title-text"
          :style="{ color: titleColor  ? titleColor : '#333',textAlign: textAlign ? textAlign : 'left' }">{{ title }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';

  const props = defineProps({
    title: {
      type: String,
      default: '标题'
    },
    scrollTop: {
      type: Number,
      default: 0
    },
    leftIconColor: {
      type: String,
      default: '#333'
    },
    titleColor: {
      type: String,
      default: '#333'
    },
    textAlign: {
      type: String,
      default: 'left'
    },
    customNavContentBgColor: {
      type: String,
      default: ''
    },
    showGoBack: {
      type: Boolean,
      default: true //是否显示返回按钮
    }
  });

  const navHeight = ref(0);
  const navTop = ref(0);
  const navBottom = ref(0);

  const calculateNavHeight = () => {
    // const systemInfo = uni.getSystemInfoSync();
    const sysMenu = uni.getMenuButtonBoundingClientRect();
    navHeight.value = sysMenu.height;
    navTop.value = sysMenu.top;
    navBottom.value = sysMenu.top + sysMenu.height;
  };

  const goBack = () => {
    // 获取当前页面栈
    const pages = getCurrentPages();
    
    // 如果页面栈长度大于1，说明可以返回
    if (pages.length > 1) {
      uni.navigateBack();
    } else {
      // 如果已经是第一个页面，可以选择跳转到首页或其他处理方式
      console.log('已经是第一个页面，无法返回');
      
      // 可以选择跳转到首页
      uni.switchTab({
        url: '/pages/leagueMatchesHome/index'
      });
    }
  };

  onMounted(() => {
    calculateNavHeight();
    console.log('scrollTop', props.scrollTop);

    console.log('customNavContentBgColor', props.customNavContentBgColor);

  });
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>